<!DOCTYPE html>
<html style="background-color: #f2f2f2;" lang="en">
<%include("/common/header.html",{title:''}){}%>
<body>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">

    <div class="layui-col-sm6 layui-col-md2">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">总面积</span>
          <span class="layui-badge layui-bg-blue layuiadmin-badge">总</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-template-1"></i><span style="margin-left: 70px;color: #05aaaa;" id="area">0</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">㎡</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md2">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">占地面积</span>
          <span class="layui-badge layui-bg-green layuiadmin-badge">绿</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-template-1"></i><span style="margin-left: 70px;color: #05aaaa;" id="lharea">0</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">㎡</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md2">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">土建面积</span>
          <span class="layui-badge layui-bg-cyan layuiadmin-badge">土</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-template-1"></i><span style="margin-left: 70px;color: #05aaaa;" id="tjarea">0</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">㎡</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md2">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">采集频率</span>
          <span class="layui-badge layui-bg-orange layuiadmin-badge">频</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-username"></i><span style="margin-left: 70px;color: #05aaaa;" id="yhnum">15</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">分钟</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md2">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">设备数量</span>
          <span class="layui-badge layui-bg-orange layuiadmin-badge">管</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-username"></i><span style="margin-left: 70px;color: #05aaaa;" id="xcnum">0</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">个</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md2">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">视频数量</span>
          <span class="layui-badge layui-bg-orange layuiadmin-badge">施</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-username"></i><span style="margin-left: 70px;color: #05aaaa;">${constructionuser}</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">个</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm12">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-header">精细养护统计</div>
            <div class="layui-card-body">
              <table class="layui-table" lay-skin="line">
                <tbody>
                <tr>
                  <td >
                    <div id="container" style="width:100%; height:300px"></div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-header">巡查逐月统计</div>
            <div class="layui-card-body">
              <table class="layui-table" lay-skin="line">
                <tbody>
                <tr>
                  <td >
                    <div id="container2" style="width:100%; height:300px"></div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-header">当月健康异常统计</div>
            <div class="layui-card-body">
              <table class="layui-table" lay-skin="line">
                <tbody>
                <tr>
                  <td >
                    <div id="container3" style="width:100%; height:300px"></div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-header">当月缺勤人数统计</div>
            <div class="layui-card-body">
              <table class="layui-table" lay-skin="line">
                <tbody>
                <tr>
                  <td >
                    <div id="container4" style="width:100%; height:300px"></div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="layui-col-sm12">
          <div class="layui-col-sm6">
            <div class="layui-card">
              <div class="layui-card-header">养护列表</div>
              <div class="layui-card-body">
                <table class="layui-hide" id="demo"></table>
              </div>
            </div>
          </div>
          <div class="layui-col-sm6">
            <div class="layui-card">
              <div class="layui-card-header">巡查列表（未完成的）</div>
              <div class="layui-card-body">
                <table class="layui-hide" id="demo01"></table>
               <!-- <table class="layui-table layuiadmin-page-table" lay-skin="line">
                  <thead>
                  <tr>
                    <th>任务名称</th>
                    <th>问题情况</th>
                    <th>发布时间</th>
                    <th>要求完成时间</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td><span class="first">A项目</span></td>
                    <td><i class="layui-icon layui-icon-username">阿良</i></td>
                    <td><i class="layui-icon layui-icon-time">2020-01-20</i></td>
                    <td><i class="layui-icon layui-icon-time">2020-03-15</i></td>
                  </tr>
                  <tr>
                    <td><span class="second">B项目</span></td>
                    <td><i class="layui-icon layui-icon-username">阿翔</i></td>
                    <td><i class="layui-icon layui-icon-time">2020-01-15</i></td>
                    <td><i class="layui-icon layui-icon-time">2020-03-29</i></td>
                  </tr>
                  <tr>
                    <td><span class="third">C项目</span></td>
                    <td><i class="layui-icon layui-icon-username">胡总</i></td>
                    <td><i class="layui-icon layui-icon-time">2020-01-09</i></td>
                    <td><i class="layui-icon layui-icon-time">2020-03-05</i></td>
                  </tr>
                  <tr>
                    <td>D项目</td>
                    <td><i class="layui-icon layui-icon-username">宁总</i></td>
                    <td><i class="layui-icon layui-icon-time">2020-01-13</i></td>
                    <td><i class="layui-icon layui-icon-time">2020-03-14</i></td>
                  </tr>
                  <tr>
                    <td>E项目</td>
                    <td><i class="layui-icon layui-icon-username">荣荣</i></td>
                    <td><i class="layui-icon layui-icon-time">2020-01-04</i></td>
                    <td><i class="layui-icon layui-icon-time">2020-03-30</i></td>
                  </tr>
                  <tr>
                    <td>F项目</td>
                    <td><i class="layui-icon layui-icon-username">闯哥</i></td>
                    <td><i class="layui-icon layui-icon-time">2020-01-25</i></td>
                    <td><i class="layui-icon layui-icon-time">2020-03-18</i></td>
                  </tr>
                  <tr>
                    <td>G项目</td>
                    <td><i class="layui-icon layui-icon-username">周权</i></td>
                    <td><i class="layui-icon layui-icon-time">2020-01-19</i></td>
                    <td><i class="layui-icon layui-icon-time">2020-03-09</i></td>
                  </tr>
                  </tbody>
                </table>-->
              </div>
            </div>
          </div>
      </div>
    </div>

  </div>
</div>
<%include("/common/foot.html"){}%>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
  layui.use(['index', 'table', 'form'], function () {
    var $ = layui.jquery;
    var table = layui.table;

    //展示已知数据
    table.render({
      elem: '#demo'
      ,cols: [[ //标题栏
        {templet: '<div>{{d.greedLand.greedLandAdministrator.name}}</div>' ,title:'绿地名称', sort: true}
        ,{templet: '<div>{{d.maintenType.name}}</div>', title: '养护内容' ,sort: true}
        ,{field: 'peopleNum', title: '数量',sort: true}
        ,{field: 'maintenanceDate', title: '养护时间',sort: true}
      ]]
      ,url:'mainten/sylist.json'
      ,skin: 'line' //表格风格
      ,even: true
      //,page: true //是否显示分页
      //,limits: [5, 7, 10]
      ,limit: 7 //每页默认显示的数量
    });
    //展示已知数据
    table.render({
      elem: '#demo01'
      ,cols: [[ //标题栏
        {templet: '<div>{{d.source}}</div>' ,title:'任务名称', sort: true}
        ,{templet: '<div>{{d.situation}}</div>', title: '问题情况' ,sort: true}
        ,{field: 'publishTime', title: '发布时间',sort: true}
        ,{field: 'completeTime', title: '要求完成时间',sort: true}
      ]]
      ,url:'patrol/admin/adminUnCompleteList.jhtml'
      ,skin: 'line' //表格风格
      ,even: true
      //,page: true //是否显示分页
      //,limits: [5, 7, 10]
      ,limit: 7 //每页默认显示的数量
    });

    /*----------------管理角色豆腐块-仨面积加养护-Start--------------------*/
    let cube = new Promise(function (resolve, reject) {
      $.ajax({
        url: "greedLand/statistics.json",
        type: "POST",
        data: {},
        dataType: "json",
        success: function (ret) {
          if (ret) {
            resolve(ret);
          } else {
            alert("网络异常，请稍后再试吧" + JSON.stringify(err))
          }
        },
        error: function (jqXHR, textStatus, errorThrown) {
        }
      });
    });
    cube.then(data => {
      if (data.data) {
        var obj = JSON.parse(data.data);
        $("#area").text(obj.area);
        $("#lharea").text(obj.lharea);
        $("#tjarea").text(obj.tjarea);
        $("#yhnum").text(obj.yhnum);
      } else {
      }
    });

    let xunchadf = new Promise(function (resolve, reject) {
      $.ajax({
        url: "patrol/admin/adminPatrolAll.json",
        type: "POST",
        data: {},
        dataType: "json",
        success: function (ret) {
          if (ret) {
            resolve(ret);
          } else {
            alert("网络异常，请稍后再试吧" + JSON.stringify(err))
          }
        },
        error: function (jqXHR, textStatus, errorThrown) {
        }
      });
    });
    xunchadf.then(data => {
      if(data.data){
        $("#xcnum").text(data.data);
      }
    });



    /*----------------管理角色豆腐块-仨面积加养护-END---------------------*/


    /*----------------管理角色-精细养护-Start--------------------*/
    let mainten = new Promise(function (resolve, reject) {
      $.ajax({
        url: "maintenstatistics/gltop.json",
        type: "POST",
        data: {},
        dataType: "json",
        success: function (ret) {
          if (ret) {
            resolve(ret);
          } else {
            alert("网络异常，请稍后再试吧" + JSON.stringify(err))
          }
        },
        error: function (jqXHR, textStatus, errorThrown) {
        }
      });
    });
    mainten.then(data => {
      var obj  = JSON.parse(data.data);
      maintenpie(obj.lv,obj.ws,obj.ss,obj.zb);
    });
    /*----------------管理角色-精细养护-END---------------------*/


    /*----------------管理角色-健康异常统计-Start--------------------*/
    let admin_healthy_static = new Promise(function (resolve, reject) {
      $.ajax({
        url: "system/healthy_statistics/admin_healthy_static.json",
        type: "POST",
        data: {},
        dataType: "json",
        success: function (ret) {
          if (ret) {
            resolve(ret);
          } else {
            alert("网络异常，请稍后再试吧" + JSON.stringify(err))
          }
        },
        error: function (jqXHR, textStatus, errorThrown) {
        }
      });
    });
    admin_healthy_static.then(data => {
      admin_healthy_static_fn(data.worklist, data.daylist);
    });
    /*----------------管理角色-健康异常统计-END---------------------*/

    /*----------------管理角色-缺勤统计-Start--------------------*/
    let admin_att_static = new Promise(function (resolve, reject) {
      $.ajax({
        url: "system/att_checkwork/admin_att_static.json",
        type: "POST",
        data: {},
        dataType: "json",
        success: function (ret) {
          if (ret) {
            resolve(ret);
          } else {
            alert("网络异常，请稍后再试吧" + JSON.stringify(err))
          }
        },
        error: function (jqXHR, textStatus, errorThrown) {
        }
      });
    });
    admin_att_static.then(obj => {
      admin_att_static_fn(obj.worklist, obj.daylist);

    });
    /*----------------管理角色-缺勤统计-END--------------------*/
  });


  /*----------------管理角色-巡查统计-Start--------------------*/


  let xchas = new Promise(function (resolve, reject) {
    $.ajax({
      url: "patrol/admin/findAllPatrolList.jhtml",
      type: "POST",
      data: {},
      dataType: "json",
      success: function (ret) {
        if (ret) {
          resolve(ret);
        } else {
          alert("网络异常，请稍后再试吧" + JSON.stringify(err))
        }
      },
      error: function (jqXHR, textStatus, errorThrown) {
      }
    });
  });
  xchas.then(data => {
    xunc_fn(data.data.com,data.data.month,data.data.unCom);
  });
  /*----------------管理角色-巡查统计-END--------------------*/
  function maintenpie(lv,ws,ss,zb) {
    //饼图（精细养护）
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
      color:['#60acfc','#5bc49f','#ff7c7c','#9287e7'],
      title: {
        text: '精细养护分类占比',
        subtext: '四大分类',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['绿地养护', '卫生清理', '设施维护', '植保管理']
      },
      series: [
        {
          name: '精细养护分类',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            {value: lv, name: '绿地养护'},
            {value: ws, name: '卫生清理'},
            {value: ss, name: '设施维护'},
            {value: zb, name: '植保管理'},

          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    if (option && typeof option === "object") {
      myChart.setOption(option, true);
    }
  }

  //////////////////////////////////////////////////////
  //饼图（日常养护）

  function  xunc_fn(c,m,u) {
    //////////////////////////////////////////////////////
    //柱图（巡查逐月）
    var dom = document.getElementById("container2");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
      title: {
        text: '巡查次数逐月统计',
        subtext: '完成/未完成'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['完成', '未完成']
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          data:m
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '完成',
          type: 'bar',
          color:'#60ACFC',
          data: c,
          markPoint: {
            data: [
              {type: 'max', name: '最大值'},
              {type: 'min', name: '最小值'}
            ]
          },
          markLine: {
            data: [
              {type: 'average', name: '平均值'}
            ]
          }
        },
        {
          name: '未完成',
          type: 'bar',
          color:'#AFE39B',
          data: u,
          markPoint: {
            data: [
              {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
              {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
            ]
          },
          markLine: {
            data: [
              {type: 'average', name: '平均值'}
            ]
          }
        }
      ],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '0%',
        top: '25%',
        containLabel: true
      }
    };
    if (option && typeof option === "object") {

      myChart.setOption(option, true);
    }
    //////////////////////////////////////////////////////


  }

  function admin_healthy_static_fn(worklist,daylist) {
    //折线图（健康异常）
    var dom = document.getElementById("container3");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
      color:'#66AFFC',
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: daylist
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '异常',
        data: worklist,
        type: 'line',
        smooth: true
      }]
    };
    if (option && typeof option === "object") {
      myChart.setOption(option, true);
    }
  }

  //////////////////////////////////////////////////////
  function admin_att_static_fn(worklist,daylist) {
//折线图（缺勤人数）
    var dom = document.getElementById("container4");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
      color:'#5FC5A1',
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: daylist
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '缺勤',
        data: worklist,
        type: 'line',
        smooth: true
      }]
    };
    if (option && typeof option === "object") {
      myChart.setOption(option, true);
    }
  }

  //////////////////////////////////////////////////////
  //柱图（用水量）
  var dom = document.getElementById("container5");
  var myChart = echarts.init(dom);
  var app = {};
  option = null;
  option = {
    title: {
      text: '逐日用水量柱状图',
      subtext: '当月',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07', '01-08', '01-09', '01-10',
        '01-11', '01-12', '01-13', '01-14', '01-15', '01-16', '01-17', '01-18', '01-19', '01-20',
        '01-21', '01-22', '01-23', '01-24', '01-25', '01-26', '01-27', '01-28', '01-29', '01-30',
        '01-31']
    },
    yAxis: {
      name: '用水量/吨',
      type: 'value'
    },
    series: [{
      name: '用水量',
      data: [12, 20, 15, 8, 7, 11, 13],
      type: 'bar',
      markPoint: {
        data: [
          {type: 'max', name: '最大值'},
          {type: 'min', name: '最小值'}
        ]
      },
      markLine: {
        data: [
          {type: 'average', name: '平均值'}
        ]
      }
    }],
    grid: {
      left: '3%',
      right: '4%',
      bottom: '0%',
      top: '25%',
      containLabel: true
    }
  };
  if (option && typeof option === "object") {
    myChart.setOption(option, true);
  }
</script>
</body>
</html>